import React, { Component } from 'react';
import {Link,browserHistory,hashHistory} from 'react-router';
import headerimg from '../../Images/header1.png';
import { connect } from 'react-redux';
import { logOut } from '../../Redux/Actions/authAction';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class Header extends Component {
  constructor(props){
    super(props);
    this.state = {
        sul: {display:"none"}
    };
    this.loginOut = this.loginOut.bind(this);
  }
  cstate(){
    if(this.refs.headerul.style.display === "none"){
        this.setState({
        sul: {display:"block"}
        });
    }else{
        this.setState({
        sul: {display:"none"}
        });
    }
  }

  loginOut(){
      //localStorage.clear();
      sessionStorage.clear();
      this.props.dispatch(logOut());
      history.push('/login');
  }

  render() {
    return (
        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div className="container-fluid">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="#"><span>捷报云</span>客服版</a>
                    <ul className="user-menu">
                        <li className="dropdown pull-right">
                            <Link to="" style={{cursor:"pointer"}} className="dropdown-toggle" data-toggle="dropdown" onClick={this.cstate.bind(this)}>
                            <img src={headerimg} className="img-circle header-img" alt="headerimg" />
                             {this.props.authReducer.user.data.truename} <span className="caret"></span></Link>
                            <ul className="dropdown-menu" role="menu" ref="headerul" style={this.state.sul}>
                                <li className="text-center" onClick={this.loginOut}>
                                    <span>注销</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
  }
}

export default connect((state) => {
    const { authReducer } = state;
    return {
        authReducer
    }
})(Header); 